<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,
        body {
            background: #f0f6be;
        }
        .section-left {
            width: 100%;
            padding-top: 5px;
            box-sizing: border-box;
            text-align: center;
            overflow: hidden;
        }
        .section-left .section-left-example {
            width: 50%;
            display: inline-block;
            float: left;
        }
        .section-left .section-left-example picture {
            box-sizing: border-box;
            width: 100%;
        }
        .section-left .section-left-example picture img {
            width: 70%;
            display: block;
            margin: 0 auto;
            border: 5px solid salmon;
        }
        .section-left .section-left-drag {
            width: 50%;
            display: inline-block;
            float: left;
        }
        .section-left .section-left-drag #holder {
            border: 5px solid salmon;
            width: 70%;
            height: 100%;
            display: block;
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }
        .section-left .section-left-drag #holder img {
            display: block;
            width: 100%;
        }
        .section-left .section-left-drag #holder.hover {
            border: 5px solid #aaa1cf;
        }
        button {
            box-sizing: border-box;
            width: 10%;
            padding: 15px 10px;
            margin: 5px 2.5%;
            -webkit-appearance: none;
            background: none;
            border-radius: 3px;
            border: 1px solid #157169;
            font-family: "proxima-nova", sans-serif;
            font-size: 14px;
            text-transform: uppercase;
            -webkit-transition: all 0.3s ease-in;
            transition: all 0.3s ease-in;
        }
        button:hover {
            background: rgba(255, 255, 255, 0.65);
            color: #000;
        }
        .section-buttons {
            width: 100%;
            box-sizing: border-box;
            padding: 20px;
            border-bottom: 1px solid lightblue;
        }
        .texto-principal {
            color: #001f3f;
            font-size: 64px;
            text-align: center;
            font-family: "proxima-nova", sans-serif;
            margin: 15px 0 0;
            font-weight: 800;
            width: 100%;
            letter-spacing: 1px;
        }
        .texto-secundario {
            font-family: "proxima-nova", sans-serif;
            font-size: 18px;
            margin: 15px 0;
            color: #001f3f;
            text-align: center;
        }
        .btn-filters {
            background: #157169;
        }
        .center-svg {
            display: block;
            margin: 0 auto;
        }
        .filters-code-even,
        .filters-code-odd {
            width: 100%;
            padding: 20px 0;
            border-bottom: 1px solid lightblue;
        }
        .filters-code-even h3,
        .filters-code-odd h3 {
            text-align: center;
            font-size: 20px;
            font-family: "proxima-nova", sans-serif;
        }
        .filters-code-even code,
        .filters-code-odd code {
            padding-top: 20px;
            width: 50%;
            margin: 0 auto;
        }
        .filters-code-even code .line-pre,
        .filters-code-odd code .line-pre {
            text-align: left;
        }
        .filters-code-even {
            background: #fcfcf6;
        }
        .filters-code-odd {
            background: white;
        }
        .saturate {
            -webkit-filter: url("#saturate");
            filter: url("#saturate");
        }
        .matrix {
            -webkit-filter: url("#matrix");
            filter: url("#matrix");
        }
        .matrix-dos {
            -webkit-filter: url("#matrixDos");
            filter: url("#matrixDos");
        }
        .huerotate {
            -webkit-filter: url("#hueRotate");
            filter: url("#hueRotate");
        }
        .luminance {
            -webkit-filter: url("#luminanceToAlpha");
            filter: url("#luminanceToAlpha");
        }
        .discrete {
            -webkit-filter: url("#discrete");
            filter: url("#discrete");
        }
        .discrete-dos {
            -webkit-filter: url("#discrete-dos");
            filter: url("#discrete-dos");
        }
        .table {
            -webkit-filter: url("#table");
            filter: url("#table");
        }
        .table-dos {
            -webkit-filter: url("#tableDos");
            filter: url("#tableDos");
        }
        .identity {
            -webkit-filter: url("#identity");
            filter: url("#identity");
        }
        .linear {
            -webkit-filter: url("#linear");
            filter: url("#linear");
        }
        .gamma {
            -webkit-filter: url("#gamma");
            filter: url("#gamma");
        }
        .turbulence {
            -webkit-filter: url("#turbulence");
            filter: url("#turbulence");
        }
        .sepia {
            -webkit-filter: url("#sepiatone");
            filter: url("#sepiatone");
        }
        .fematrix-uno {
            -webkit-filter: url("#fematrixUno");
            filter: url("#fematrixUno");
        }
        .fematrix-dos {
            -webkit-filter: url("#fematrixDos");
            filter: url("#fematrixDos");
        }
        .turbu-map {
            -webkit-filter: url("#turbuMap");
            filter: url("#turbuMap");
        }
        .map-uno {
            -webkit-filter: url("#mapUno");
            filter: url("#mapUno");
        }
        .map-dos {
            -webkit-filter: url("#mapDos");
            filter: url("#mapDos");
        }
        .blur-uno {
            -webkit-filter: url("#blurUno");
            filter: url("#blurUno");
        }
        .blur-dos {
            -webkit-filter: url("#blurDos");
            filter: url("#blurDos");
        }
        .blur-tres {
            -webkit-filter: url("#blurTres");
            filter: url("#blurTres");
        }
        .morpho-uno {
            -webkit-filter: url("#morphoUno");
            filter: url("#morphoUno");
        }
        .morpho-dos {
            -webkit-filter: url("#morphoDos");
            filter: url("#morphoDos");
        }
        .morpho-tres {
            -webkit-filter: url("#morphoTres");
            filter: url("#morphoTres");
        }
        .morpho-cuatro {
            -webkit-filter: url("#morphoCuatro");
            filter: url("#morphoCuatro");
        }
        .fail {
            background: #c00;
            padding: 2px;
            color: #fff;
        }
        .hidden {
            display: none !important;
        }
    </style>

    <script src="../../js/jquery.js"></script>


</head>
<body>
<h1 class="texto-principal">SVG Filters</h1>

<section class="section-left">
    <article class="section-left-example">
        <h1 class="texto-secundario">EXAMPLE</h1>
        <picture>
            <img src="../img/ino-festival-asalto-2015.png" alt="Mural de INO en el festival asalto celebrado en Zaragoza en septiembre de 2014. Fotografía de Jorge Aznar">
        </picture>
    </article>
    <article class="section-left-drag">
        <h1 class="texto-secundario">Drag an drop your image</h1>
        <div id="holder">
        </div>
        <p id="upload" class="hidden">
            <label>Drag &amp; drop not supported, but you can still upload via this input field:
                <br>
                <input type="file">
            </label>
        </p>
        <p id="filereader" class="hidden">File API &amp; FileReader API not supported</p>
        <p id="formdata" class="hidden">XHR2's FormData is not supported</p>
        <p id="progress" class="hidden">XHR2's upload progress isn't supported</p>
        <!-- <p>Upload progress:
            <progress id="uploadprogress" max="100" value="0">0</progress>
        </p> -->
    </article>
</section>


<section class="section-buttons">

    <button class="btn-saturate">
        Saturate
    </button>
    <button class="btn-matrix">
        Matrix
    </button>
    <button class="btn-matrix-dos">
        Matrix
    </button>
    <button class="btn-hueRotate">
        hueRotate
    </button>
    <button class="btn-luminance">
        Luminance
    </button>
    <button class="btn-discrete">
        Discrete
    </button>
    <button class="btn-discrete-dos">
        Discrete 2
    </button>
    <button class="btn-table">
        Table
    </button>
    <button class="btn-table-dos">
        Table 2
    </button>
    <button class="btn-identity">
        Identity
    </button>
    <button class="btn-turbu-map">
        Turbu * map
    </button>
    <button class="btn-linear">
        Linear
    </button>
    <button class="btn-sepia">
        Sepia
    </button>
    <button class="btn-turbulence">
        Turbulence
    </button>
    <button class="btn-gamma">
        Gamma
    </button>
    <button class="btn-con-matrix-uno">
        feMatrix 1
    </button>
    <button class="btn-con-matrix-dos">
        feMatrix 2
    </button>
    <button class="btn-blur-uno">
        Blur 1
    </button>
    <button class="btn-blur-dos">
        Blur 2
    </button>
    <button class="btn-blur-tres">
        Blur 3
    </button>
    <button class="btn-morpho-uno">
        Morpho 1
    </button>
    <button class="btn-morpho-dos">
        Morpho 2
    </button>
    <button class="btn-morpho-tres">
        Morpho 3
    </button>
    <button class="btn-morpho-cuatro">
        Morpho 4
    </button>


</section>

<svg>
    <defs>
        <!-- feColorMatrix -->

        <filter id="saturate" filterUnits="objectBoundingBox">
            <feColorMatrix type="saturate" in="SourceGraphic" values="0.4" />
        </filter>
        <filter id="matrix" filterUnits="objectBoundingBox">
            <feColorMatrix type="matrix" in="SourceGraphic" values="-1 2 -3 0 -.5
                   0 1 0 0 0
                   0 0 0 0 0
                   0 0 0 1 0" />
        </filter>
        <filter id="matrixDos" filterUnits="objectBoundingBox">
            <feColorMatrix type="matrix" in="SourceGraphic" values="-1 2 -3 0 -.5
                   2 1 0 0 0
                   0 3 0 0 0
                   0 0 1 1 0" />
        </filter>
        <filter id="hueRotate" filterUnits="objectBoundingBox">
            <feColorMatrix type="hueRotate" in="SourceGraphic" values="180" />
        </filter>
        <filter id="luminanceToAlpha" filterUnits="objectBoundingBox">
            <feColorMatrix type="luminanceToAlpha" in="SourceGraphic" values="0.4" />
        </filter>

        <!-- feComponentTransfer -->

        <filter id="discrete">
            <feComponentTransfer>
                <feFuncR type="discrete" tableValues="0 .5 1 1" />
                <feFuncG type="discrete" tableValues="0 .5 1" />
                <feFuncB type="discrete" tableValues="0 .5" />
            </feComponentTransfer>
        </filter>
        <filter id="discrete-dos">
            <feComponentTransfer>
                <feFuncR type="discrete" tableValues="0 .5 1 1" />
                <feFuncG type="discrete" tableValues="0  5 1" />
                <feFuncB type="discrete" tableValues="0 .5 1 1" />
            </feComponentTransfer>
        </filter>
        <filter id="table">
            <feComponentTransfer>
                <feFuncR type="table" tableValues="1 0 1" exponent="5" />
                <feFuncG type="table" tableValues="1 0 1" exponent="2" />
                <feFuncB type="table" tableValues="1 0 1" exponent="5" />
            </feComponentTransfer>
        </filter>
        <filter id="tableDos">
            <feComponentTransfer>
                <feFuncR type="table" tableValues="1 0 1" exponent="5" />
                <feFuncG type="table" tableValues="1 10 1" exponent="2" />
                <feFuncB type="table" tableValues="1 5 1" exponent="5" />
            </feComponentTransfer>
        </filter>
        <filter id="identity">
            <feComponentTransfer>
                <feFuncR type="identity" />
                <feFuncG type="identity" />
                <feFuncB type="identity" />
            </feComponentTransfer>
        </filter>
        <filter id="linear">
            <feComponentTransfer>
                <feFuncR type="linear" slope=".5" amplitude="6" intercept=".25" />
                <feFuncG type="linear" slope=".5" amplitude="2" intercept="0" />
                <feFuncB type="linear" slope=".5" amplitude="3" intercept=".5" />
            </feComponentTransfer>
        </filter>
        <filter id="gamma">
            <feComponentTransfer>
                <feFuncR type="gamma" amplitude="2" exponent="1" />
                <feFuncG type="gamma" amplitude="2" exponent="3" />
                <feFuncB type="gamma" amplitude="2" exponent="1" />
            </feComponentTransfer>
        </filter>

        <!-- feConvolveMatrix -->

        <filter id="fematrixUno">
            <feConvolveMatrix order="3" kernelMatrix="-1 -1 3
            -2 1 -1
            -1 1 -1" />
        </filter>
        <filter id="fematrixDos">
            <feConvolveMatrix order="4" kernelMatrix="-2 2 1 -1
                    -1 3 2 1
                    -1 0 -1 -4
                    -1 1 0 0" />
        </filter>

        <filter id="sepiatone">
            <feColorMatrix type="matrix" values=".343 .669 .119 0 0 .249 .626 .130 0 0 .172 .334 .111 0 0 .000 .000 .000 1 0" />
        </filter>

        <filter id='turbulence' x='0' y='0'>
            <feTurbulence type='turbulence' baseFrequency='.7' result='fuzz' numOctaves='2' stitchTiles='stitch' />
            <feComposite in='SourceGraphic' in2='fuzz' operator='arithmetic' k1='0' k2='1' k3='-3' k4='.01' />
        </filter>



        <!-- feGaussianBlur * feDisplacementMap -->


        <!--      <filter id="mapUno">
           <feGaussianBlur stdDeviation="3" result="gausiano"/>
           <feDisplacementMap in="SourceGraphic" in2="gausiano" scale="200" xChannelSelector="R" yChannelSelector="G" result="C"/>
         </filter>
         <filter id="mapDos">
           <feGaussianBlur stdDeviation="3" result="gausiano"/>
           <feDisplacementMap in="SourceGraphic" in2="gausiano" scale="200" xChannelSelector="G" yChannelSelector="A" result="C"/>
         </filter> -->

        <filter id="turbuMap">
            <feTurbulence type="fractalNoise" baseFrequency="0.015" numOctaves="2" result="turbulence" data-filterId="3" />
            <feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="turbulence" scale="40" />
        </filter>

        <!-- feGaussianBlur -->

        <filter id="blurUno">
            <feGaussianBlur stdDeviation="3" />
        </filter>
        <filter id="blurDos">
            <feGaussianBlur stdDeviation="9" />
        </filter>
        <filter id="blurTres">
            <feGaussianBlur stdDeviation="18" />
        </filter>

        <!-- feMorphology -->

        <filter id="morphoUno">
            <feMorphology operator="erode" in="SourceGraphic" radius="3" />
        </filter>
        <filter id="morphoDos">
            <feMorphology operator="erode" in="SourceGraphic" radius="6" />
        </filter>
        <filter id="morphoTres">
            <feMorphology operator="dilate" in="SourceGraphic" radius="3" />
        </filter>
        <filter id="morphoCuatro">
            <feMorphology operator="dilate" in="SourceGraphic" radius="6" />
        </filter>
    </defs>

</svg>
</body>
</html>


<script>
    $(".btn-saturate").click(function() {
        $("img").removeClass().addClass("saturate");
    });


    $(".btn-matrix").click(function() {
        $("img").removeClass().addClass("matrix");
    });

    $(".btn-matrix-dos").click(function() {
        $("img").removeClass().addClass("matrix-dos");
    });

    $(".btn-hueRotate").click(function() {
        $("img").removeClass().addClass("huerotate");
    });

    $(".btn-luminance").click(function() {
        $("img").removeClass().addClass("luminance");
    });

    $(".btn-discrete").click(function() {
        $("img").removeClass().addClass("discrete");
    });

    $(".btn-discrete-dos").click(function() {
        $("img").removeClass().addClass("discrete-dos");
    });

    $(".btn-table").click(function() {
        $("img").removeClass().addClass("table");
    });

    $(".btn-table-dos").click(function() {
        $("img").removeClass().addClass("table-dos");
    });

    $(".btn-identity").click(function() {
        $("img").removeClass().addClass("identity");
    });

    $(".btn-linear").click(function() {
        $("img").removeClass().addClass("linear");
    });

    $(".btn-gamma").click(function() {
        $("img").removeClass().addClass("gamma");
    });

    $(".btn-turbulence").click(function() {
        $("img").removeClass().addClass("turbulence");
    });

    $(".btn-sepia").click(function() {
        $("img").removeClass().addClass("sepia");
    });

    $(".btn-turbu-map").click(function() {
        $("img").removeClass().addClass("turbu-map");
    });

    $(".btn-con-matrix-uno").click(function() {
        $("img").removeClass().addClass("fematrix-uno");
    });

    $(".btn-con-matrix-dos").click(function() {
        $("img").removeClass().addClass("fematrix-dos");
    });

    $(".btn-map-uno").click(function() {
        $("img").removeClass().addClass("map-uno");
    });

    $(".btn-map-dos").click(function() {
        $("img").removeClass().addClass("map-dos");
    });

    $(".btn-blur-uno").click(function() {
        $("img").removeClass().addClass("blur-uno");
    });

    $(".btn-blur-dos").click(function() {
        $("img").removeClass().addClass("blur-dos");
    });

    $(".btn-blur-tres").click(function() {
        $("img").removeClass().addClass("blur-tres");
    });

    $(".btn-morpho-uno").click(function() {
        $("img").removeClass().addClass("morpho-uno");
    });

    $(".btn-morpho-dos").click(function() {
        $("img").removeClass().addClass("morpho-dos");
    });

    $(".btn-morpho-tres").click(function() {
        $("img").removeClass().addClass("morpho-tres");
    });

    $(".btn-morpho-cuatro").click(function() {
        $("img").removeClass().addClass("morpho-cuatro");
    });

    //DRAG & DROP

    var holder = document.getElementById('holder'),
            tests = {
                filereader: typeof FileReader != 'undefined',
                dnd: 'draggable' in document.createElement('span'),
                formdata: !!window.FormData,
                progress: "upload" in new XMLHttpRequest
            },
            support = {
                filereader: document.getElementById('filereader'),
                formdata: document.getElementById('formdata'),
                progress: document.getElementById('progress')
            },
            acceptedTypes = {
                'image/png': true,
                'image/jpeg': true,
                'image/gif': true
            },
            progress = document.getElementById('uploadprogress'),
            fileupload = document.getElementById('upload');

    "filereader formdata progress".split(' ').forEach(function(api) {
        if (tests[api] === false) {
            support[api].className = 'fail';
        } else {
            // FFS. I could have done el.hidden = true, but IE doesn't support
            // hidden, so I tried to create a polyfill that would extend the
            // Element.prototype, but then IE10 doesn't even give me access
            // to the Element object. Brilliant.
            support[api].className = 'hidden';
        }
    });

    function previewfile(file) {
        if (tests.filereader === true && acceptedTypes[file.type] === true) {
            var reader = new FileReader();
            reader.onload = function(event) {
                var image = new Image();
                image.src = event.target.result;
                image.width = 250; // a fake resize
                holder.appendChild(image);
            };

            reader.readAsDataURL(file);
        } else {
            holder.innerHTML += '<p>Uploaded ' + file.name + ' ' + (file.size ? (file.size / 1024 | 0) + 'K' : '');
            console.log(file);
        }
    }

    function readfiles(files) {
        debugger;
        var formData = tests.formdata ? new FormData() : null;
        for (var i = 0; i < files.length; i++) {
            if (tests.formdata) formData.append('file', files[i]);
            previewfile(files[i]);
        }

        // now post a new XHR request
        if (tests.formdata) {
            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/your_handler.php'); //Note! replace handler here with your own
            xhr.onload = function() {
                progress.value = progress.innerHTML = 100;
            };

            if (tests.progress) {
                xhr.upload.onprogress = function(event) {
                    if (event.lengthComputable) {
                        var complete = (event.loaded / event.total * 100 | 0);
                        progress.value = progress.innerHTML = complete;
                    }
                }
            }

            xhr.send(formData);
        }
    }

    if (tests.dnd) {
        holder.ondragover = function() {
            this.className = 'hover';
            return false;
        };
        holder.ondragend = function() {
            this.className = '';
            return false;
        };
        holder.ondrop = function(e) {
            this.className = '';
            e.preventDefault();
            readfiles(e.dataTransfer.files);
        }
    } else {
        fileupload.className = 'hidden';
        fileupload.querySelector('input').onchange = function() {
            readfiles(this.files);
        };
    }
</script>